<template>
	<view class="invite">
		<view class="bg_box"></view>
		<image :src="imgConfig + 'images/index/invite_bg1.png'" mode="widthFix" class="bg1"></image>
		<view class="bg2">
			<image :src="imgConfig + 'images/index/invite_bg3.png'" mode="widthFix" class="bg"></image>
			<view class="cont">
				<view class="edit" @click="changeTeam">
					修改名称
				</view>
				<view class="head">
					<view class="icon">
						<image :src="imgUrl" mode="widthFix"></image>
					</view>
					<view class="val">
						<view class="label">
							团队名称
						</view>
						<view class="name">
							{{name}}
						</view>
					</view>
				</view>
				<view class="hr"></view>
				<view class="title">
					您的专属邀请码
				</view>
				<view class="ul">
					<view class="li" v-for="item in inviteCode">
						{{item}}
					</view>
				</view>
				<button open-type="share" class="btn">分享我的邀请码</button>
				<button class="btn" @click="openCode"
					style="margin-top: 20rpx;border: 1px solid #FF9600;background: #fff;color: #FF9600;">分享二维码</button>
			</view>
		</view>
		<!-- 团队名称修改 -->
		<view class="modal">
			<tui-modal :show="teamVis" custom>
				<view class="custom">
					<view class="head">
						<view class="h1">团队名称</view>
						<view class="h2">可根据需要修改当前团队名称</view>
					</view>
					<input type="text" placeholder="团队名称" class="input" v-model="name">
					<view class="handle">
						<view class="flex" style="margin-right: 20rpx;">
							<tui-button height="80rpx" :size="28" type="gray" shape="circle" @click="teamVis = false">取消
							</tui-button>
						</view>
						<view class="flex">
							<tui-button height="80rpx" :size="28" type="warning" shape="circle" @click="editTeam()">确定
							</tui-button>
						</view>
					</view>
				</view>
			</tui-modal>
		</view>
		<!-- 二维码弹出层 -->
		<view class="codeModal">
			<tui-modal :show="isCode" custom>
				<view class="custom">
					<image :src="imgConfig + 'images/index/delay_close.png'" mode="widthFix" class="close"
						@click="closeCode"></image>
					<view class="code">
						<image :src="codeUrl" mode="widthFix"></image>
					</view>
					<view class="handle">
						<view class="flex">
							<tui-button height="80rpx" :size="28" type="warning" shape="circle" @click="saveUrl">下载
							</tui-button>
						</view>
					</view>
				</view>
			</tui-modal>
		</view>
		<canvas type="2d" style="width: 120px; height: 120px;position: fixed;top: -1000px;" id="myQrcode"></canvas>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const drawQrcode = require("@/utils/qrcode.js")
	const app = getApp()
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				imgUrl: util.domainImg + "images/mall/spread_d_icon.png",
				name: "",
				inviteCode: "",

				teamVis: false,
				isCode: false,
				codeUrl: '',
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {
			this.getUser()
		},
		onShow() {

		},
		// 用户分享
		onShareAppMessage() {
			if (this.inviteCode) {
				return {
					title: '翎麓商城注册',
					path: 'pages_auth/register/register?shareCode=' + this.inviteCode
				}
			}
		},
		methods: {
			// 获取用户信息
			getUser() {
				util.request('user/baseInfo').then(res => {
					if (res.code == 0) {
						this.inviteCode = res.data.inviteCode;
						this.name = res.data.userName;
					}
				});
			},
			// 团队弹出层
			changeTeam() {
				this.teamVis = true;
			},
			// 修改团队名称
			editTeam() {
				util.request('user/updateBaseInfo', {
					userName: this.name
				}, 'POST').then(res => {
					if (res.code == 0) {
						this.teamVis = false;
						this.getUser();
					}
				});
			},
			// 打开二维码
			async openCode() {
				let _this = this;
				this.isCode = true;
				// let url = await this.makeQrcode("https://wechat.jiaxuglobal.com?inviteCode=" + this.inviteCode);
				// console.log(url);
				// util.uploadFile('upload/upload', url).then(function(resp) {
				// 	if (resp.code == 0) {
				// 		_this.codeUrl = resp.url;
				// 	}
				// })
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle", // 分享跳转的链接
					title: "微信分享", // 分享标题
					summary: "微信分享示例", // 分享内容文字
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7", //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
						console.log(err);
					}
				});
			},
			// 关闭二维码
			closeCode() {
				this.isCode = false;
			},
			// 保存图片到本地
			saveUrl() {
				let _this = this;
				uni.downloadFile({
					url: _this.codeUrl, // 这里是我已经请求好的图片数据
					success: function(res) {
						// console.log('res:',res)
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({ // 然后调用这个方法
							filePath: tempFilePath,
							success: (res1) => {
								uni.showToast({
									title: '图片已保存'
								})
								setTimeout(() => {
									_this.closeCode();
								}, 2000)
							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '图片保存失败'
						})
					}
				});
			},
			/**
			 * 生成二维码（没有使用叠加图片）
			 * text - 码值
			 * */
			makeQrcode(text) {
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery()
					query.select('#myQrcode').fields({
						node: true,
						size: true
					}).exec((res) => {
						// 获取node节点实例，目前仅微信，快手，京东小程序支持；
						// #ifdef MP-WEIXIN || MP-KUAISHOU
						let canvas = res[0].node
						// #endif
						// 调用方法drawQrcode生成二维码
						drawQrcode({
							// #ifdef MP-WEIXIN || MP-KUAISHOU
							canvas: canvas,
							// #endif
							canvasId: 'myQrcode',
							width: 120,
							padding: 0,
							background: '#ffffff',
							foreground: '#000000',
							text: text,
						})
						// 获取临时路径
						uni.canvasToTempFilePath({
							canvasId: 'myQrcode',
							// #ifdef MP-WEIXIN || MP-KUAISHOU
							canvas: canvas,
							// #endif
							x: 0,
							y: 0,
							width: 120,
							height: 120,
							destWidth: 120,
							destHeight: 120,
							success(res) {
								resolve(res.tempFilePath); // 临时路径
							},
							fail(res) {
								console.error(res);
								reject();
							}
						})
					});
				})
			}
		},
	};
</script>

<style lang="scss">
	.invite {
		.bg_box {
			background: linear-gradient(90deg, #F3DDB4, #F9EAD3, #EECC95);
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.bg1 {
			width: 100%;
			display: block;
			margin-bottom: 8rpx;
			position: relative;
		}

		.bg2 {
			width: 100%;
			padding: 0 20rpx;
			position: relative;

			.bg {
				width: 100%;
				display: block;
			}

			.cont {
				width: 100%;
				height: 100%;
				z-index: 1;
				position: absolute;
				left: 0;
				top: 0;

				.head {
					height: 130rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 110rpx;

					.icon {
						margin-left: 146rpx;
						width: 126rpx;
						height: 126rpx;
						overflow: hidden;
						border-radius: 50%;
						border: 1rpx solid #FF9600;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.val {
						margin-left: 30rpx;
						font-size: 30rpx;
						color: #111111;

						.label {
							font-weight: bold;
						}

						.name {
							margin-top: 10rpx;
						}
					}
				}

				.hr {
					width: 630rpx;
					height: 2rpx;
					background: #FF9600;
					opacity: 0.18;
					margin: 60rpx auto 0;
				}

				.title {
					font-size: 30rpx;
					color: #111111;
					text-align: center;
					margin: 40rpx 0 20rpx;
				}

				.ul {
					width: 100%;
					padding: 0 80rpx;
					text-align: center;

					.li {
						width: 65rpx;
						height: 120rpx;
						background: #FFFBF4;
						font-size: 46rpx;
						font-weight: bold;
						color: #111111;
						line-height: 120rpx;
						display: inline-block;
						text-align: center;
						margin: 0 5rpx;
					}
				}

				.btn {
					width: 580rpx;
					height: 80rpx;
					background: #FF9600;
					border-radius: 40rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					margin: 40rpx auto 0;
				}

				.edit {
					width: 134rpx;
					height: 71rpx;
					background: url('@/static/images/index/invite_icon3.png');
					background-size: 100% 100%;
					font-size: 22rpx;
					color: #FF9600;
					text-align: center;
					line-height: 65rpx;
					position: absolute;
					right: 23rpx;
					top: 143rpx;
				}
			}
		}

		.modal {
			.custom {
				.head {
					text-align: center;

					.h1 {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.h2 {
						font-size: 28rpx;
						color: #666;
						padding-top: 10rpx;
					}
				}

				.input {
					font-size: 30rpx;
					color: #333;
					border: 1px solid #eee;
					height: 80rpx;
					margin: 40rpx 0 50rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.handle {
					display: flex;
				}
			}
		}

		.codeModal {
			.custom {
				position: relative;

				.close {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					right: -30rpx;
					top: -30rpx;
				}

				.code {
					width: 400rpx;
					height: 400rpx;
					margin: 30rpx auto 40rpx;
					padding: 20rpx;
					border: 1px solid #eee;
					border-radius: 16rpx;

					image {
						width: 100%;
					}
				}

				.handle {
					display: flex;
				}
			}
		}
	}
</style>
